<!--@author: wxm; @version: 1.0; date: 2021/5/15;-->
<template>
    <div id="app">
        <el-container style="height: 100%">
            <!--工具栏-->
<!--            <el-header style="position: absolute;right: 0;top:20px;height: 40px; z-index: 101;">-->
<!--                <el-button @click="methods.zoom(true)">放大</el-button>-->
<!--                <el-button @click="methods.zoom(false)">缩小</el-button>-->
<!--                <el-button @click="methods.resetZoom()">还原大小</el-button>-->
<!--                <el-button @click="methods.focusOn()">位置还原</el-button>-->
                <el-button @click="methods.getGraphData()">获取数据</el-button>
<!--                <el-button @click="methods.undo()">上一步</el-button>-->
<!--                <el-button @click="methods.redo()">下一步</el-button>-->
<!--            </el-header>-->
            <el-button @click="methods.downloadImg()">下载</el-button>



            <el-container style="height: 100%">
                <!--组件栏-->
                <div class="node-panel">
                    <div class="node-item" @mousedown='methods.mouseDownHandle(item)' v-for="(item,index) in shapeList" :key="index">
                        <div class="node-item-icon" :class="item.class">
                            <span class="node-label">{{item.text}}</span>
                        </div>
                    </div>
                </div>

                <!--内容区-->
                <el-main id="graph" style="height: 100%;"></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {toRefs,reactive,onMounted} from 'vue'

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
//插件库
import { NodeResize, Menu  } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'

// 右键菜单
LogicFlow.use(Menu);

//节点缩放
// 样式不要
// NodeResize.style.outline = {
//     style: {
//         outline: {
//             stroke: '#000000',
//             strokeWidth: 1,
//             strokeDasharray: '3,3',
//         },
//         controlPoint: {
//             width: 7,
//             height: 7,
//             fill: '#FFFFFF',
//             stroke: '#000000',
//         },
//     },
//     ...NodeResize.style.outline,
//     stroke: '#1E90FF',
//     strokeDasharray: '',
// }
LogicFlow.use(NodeResize);
NodeResize.step = 4;
LogicFlow.use(NodeResize);

//框选
import {SelectionSelect} from '@logicflow/extension';
LogicFlow.use(SelectionSelect);
//SelectionSelect.open(); 此事件无效

//迷你地图
// import {MiniMap} from '@logicflow/extension';
// LogicFlow.use(MiniMap);

//控制面板
// import {Control} from '@logicflow/extension';
// LogicFlow.use(Control )

//图片导出
import { Snapshot } from '@logicflow/extension';
LogicFlow.use(Snapshot);


import {BackgroundConfig} from './config/BackgroundConfig'
import {GridOptionsConfig} from './config/GridOptionsConfig'
import {StyleConfig} from './config/StyleConfig'

import {registerMyRectNodeModel} from './node/myRectNode'

export default {
    name: 'App',
    components:{
    },
    setup(){
        onMounted(()=>{
            methods.init();
            window.onkeydown = function (){
                let key = window.event.keyCode;
                if (key === 46) {
                    methods.deleteNode();
                }
                console.log(key)
            }
        });
        const data = reactive({
            lf:null,
            logicFlowData:{
                nodes:[
                    {id: 1,type: 'rect', x: 400, y: 400, text: '矩形节点',width:200,height:200,},
                    {id: 2,type: 'circle', x: 120, y: 80, text: {value: '圆形节点',x: 120, y: 80,},},
                    {id: 3,type: 'ellipse', x: 200, y: 310, text: '椭圆节点',},
                    {id: 5,type: 'ellipse', x: 250, y: 310, text: '椭圆节点',},
                    {id: 4,type: 'my-rect', x: 250, y: 500, text: '自定义',},
                ]
            },
            shapeList: [
                {type: 'rect', text: '矩形',class:'node-rect'},
                {type: 'diamond', text: '菱形',class:'node-diamond'},
                {type: 'circle', text: '圆形',class:'node-circle'},
                {type: 'ellipse', text: '椭圆',class:'node-ellipse'},
                {type: 'my-rect', text: '自定义',class:'node-rect'},
                // {type: 'chatBubble', text: 'chatBubble',class:'node-polygon'},
                // {type: 'text=1', text: 'text=1',class:'node-polygon'},
            ],
            clickNodeId:'',
            clickEdgeId:'',
        });
        const methods = {
            /**
             *  初始化画板
             */
            init : function () {
                data.lf = new LogicFlow({
                    // 容器配置
                    container: document.querySelector('#graph'),
                    background: BackgroundConfig,
                    grid: GridOptionsConfig,
                    textEdit: true, //是否开启文本编辑
                    isSilentMode: false, //仅浏览不可编辑模式，默认不开启
                    edgeType: 'polyline', //line 直线 polyline 折线 bezier 贝塞尔曲线
                    snapline: true, //是否启用节点辅助对齐线
                    style: StyleConfig,//样式
                    keyboard: {//cv快捷键
                        enabled: true
                    },
                    metaKeyMultipleSelected:true,//metaKeyMultipleSelected	Boolean	false	-	是否开启功能键按住多选
                });

                //注册自定义组件
                methods.registerNode();
                data.lf.render(data.logicFlowData);
                //监听事件
                methods.monitorEvent();

                //开启多选模式
                data.lf.updateEditConfig({
                    stopMoveGraph: true
                })

                //开启地图
                //MiniMap.show(1000,100);
            },

            /**
             * 注册自定义组件
             **/
            registerNode : function(){
                registerMyRectNodeModel(data.lf);
            },

            /**
             * 拖拽
             * @param item 拖拽属性
             */
            mouseDownHandle : function (item) {
                //生成ID
                let id = data.logicFlowData.nodes[data.logicFlowData.nodes.length -1].id + 1;
                console.log(item,id)
                data.lf.dnd.startDrag({
                    id: id.toString(),
                    type:item.type,
                    text:item.text,
                    properties:{}
                });
            },

            // 放大或缩小画布 isZoomIn:boolean
            zoom : function (isZoomIn){
                data.lf.zoom(isZoomIn);
            },
            //还原
            resetZoom : function (){
                data.lf.resetZoom();
            },
            //等比缩小 size:number
            setZoomMiniSize :function(size){
                data.lf.setZoomMiniSize(size)
            },
            //等比放大 size:number
            setZoomMaxSize : function (size){
                data.lf.setZoomMaxSize(size);
            },

            // 将图形移动到画布中心 focusOnArgs:{id:"内容ID",coordinate: {x: 11,y: 22}}
            focusOn : function (){
                data.lf.focusOn({coordinate: {x: 180,y: 280}});
            },

            //返回值，如果是应用了adapter插件，且设置为adapterOut，返回为转换后的数据格式，否则为默认的格式
            getGraphData : function (){
                console.log(data.lf.getGraphData())
            },

            //撤销一步
            undo : function (){
                data.lf.undo();
            },

            // 向前一步
            redo : function (){
                data.lf.redo();
            },

            //监听事件
            monitorEvent : function (){
                //点击节点将 节点ID记录下来
                data.lf.on('element:click', (callback) => {
                    console.log('节点/线点击事件：' + 'element:click',callback)
                    //有连线起始节点的id 说明是线
                    if (callback.data.sourceNodeId){
                        data.clickEdgeId = callback.data.id;
                        //清除节点的
                        data.clickNodeId = '';
                    }else{
                        data.clickNodeId = callback.data.id;
                        //清除线
                        data.clickEdgeId = '';
                    }
                })

                //点击画板 将记录下来的节点和线ID进行删除
                data.lf.on('blank:mousedown',() =>{
                    console.log('画板点击事件：' + 'blank:mousedown')
                    data.clickNodeId = ''
                    data.clickEdgeId = ''
                })
            },

            //删除节点
            deleteNode : function (){
                if (data.clickNodeId){
                    console.log("删除节点")
                    data.lf.deleteNode(data.clickNodeId);
                    //重置data.clickDataId
                    data.clickNodeId = null;
                }else if (data.clickEdgeId){
                    console.log("删除线")
                    data.lf.deleteEdge(data.clickEdgeId);
                    //重置data.clickEdgeId
                    data.clickEdgeId = '';
                }else{
                    console.log("批量删除");
                }
            },

            //下载图片
            downloadImg : function (){
                data.lf.getSnapshot()
            }

        }
        return {
            ...toRefs(data),
            methods,
        }
    },
}
</script>

<style>
>>>.el-main{
    padding: 10px;
    margin: 0;
}
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}
.node-panel {
    width: 70px;
    padding: 20px 0;
    background-color: white;
    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
    border-radius: 6px;
    text-align: center;
    z-index: 101;
}
.node-item {
    margin-bottom: 20px;
}
.node-item-icon {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    background-size: cover;
    text-align: center;
}
.node-label {
    font-size: 12px;
    margin-top: 5px;
    user-select: none;
}
.node-rect{
    width: 40px;
    height: 30px;
    border: 2px solid black;
}
.node-circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid black;
}
.node-ellipse{
    border: 2px solid black;
    border-radius: 60%;
    width: 40px;
    height: 30px;
}
.node-polygon{
    width: 40px;
    height: 40px;
    border: 2px solid black;
    transform:rotate(45deg);
}
.node-diamond{
    width: 40px;
    height: 40px;
    border: 2px solid black;
    transform:rotate(45deg);
}
/*css 设置*/
.lf-menu-delete .lf-menu-item-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/delete.jpg') no-repeat;
    background-size: 20px;
}
</style>
